<template>
  <div class="xxPage">
    <el-row type="flex" class="mt-10">
      <el-button @click="toYeBtn">
        孙子组件修改爷爷组件 inject 修改 provide
      </el-button>

      <el-button @click="toRest"> 重置 </el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'sonPage',
  components: {},
  props: {},
  data() {
    return {}
  },
  inject: {
    obj: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toYeBtn() {
      this.obj.msg = '修改后'
      this.obj.num++
    },

    toRest() {
      this.obj.msg = '修改前'
      this.obj.num = 0
    },
  },
}
</script>

<style scoped lang="scss">
.xxPage {
  height: 100%;
}
</style>
